<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="mId" label="设备ID" width="90"/>
    <el-table-column prop="mname" label="设备名称" width="180"/>
    <el-table-column prop="mcode" label="设备编号" width="120"/>
    <el-table-column prop="start" label="预约开始时间" width="180">
      <template #default='{row}'>
        {{ formatDateToYYYYMMDD(row.start) }}
      </template>
    </el-table-column>
    <el-table-column prop="end" label="预约结束时间" width="180">
      <template #default='{row}'>
        {{ formatDateToYYYYMMDD(row.end) }}
      </template>
    </el-table-column>
    <el-table-column prop="uname" label="预约人" width="150"/>
    <el-table-column prop="status" label="设备状态" width="130">
      <template #default='{row}'>
        <el-tag type="primary" v-show="row.eStatus === '0'">正常-可预约</el-tag>
        <el-tag type="danger" v-show="row.eStatus === '1'">维修-不可预约</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="bStatus" label="预约状态" width="180">
      <template #default='{row}'>
        <el-tag type="info" v-show="row.bStatus === 0">待审核</el-tag>
        <el-tag type="success" v-show="row.bStatus === 1">通过</el-tag>
        <el-tag type="danger" v-show="row.bStatus === 2">拒绝</el-tag>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      class='pagination'
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page='page'
      :page-size='size'
      :page-sizes='[5, 10, 20]'
      layout='total, sizes, prev, pager, next, jumper'
      :total='total'
  >
  </el-pagination>

</template>

<script setup>
import {ref, onMounted} from 'vue'
import {listBookingList, listMyBookingList, updateStatus} from "@/api/booking";
import store from "@/store";

const tableData = ref([])
const page = ref(1) // 页数
const size = ref(10)// 页面数
const total = ref(0) // 总数

onMounted(() => {
  console.log('onMounted')
  list()
})

//初始化数据
const list = async (page, pagesize) => {
  let data = await listMyBookingList({
    uid: store.getters.uid, //用户id
    page,
    pagesize
  })
  console.log('listBookingList=   ', data)
  tableData.value = data.msg.data
  total.value = res.msg.total
}

const handleSizeChange = (currentSize) => {
  size.value = currentSize
  list(page.value,size.value)
}

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  list(page.value,size.value)
}



// 设备名称
// 设备编号
// 预约人
// 开始时间
// 结束时间
// 审核状态


function formatDateToYYYYMMDD(isoString) {
  // 使用Date构造函数来解析ISO 8601格式的日期字符串
  const date = new Date(isoString);

  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    throw new Error('Invalid date string');
  }

  // 获取年月日的部分，并使用padStart方法确保月份和日期始终是两位数
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth返回的是0-11，所以需要+1
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接年月日并返回
  return `${year}-${month}-${day}`;
}


</script>

<style scoped>

.pagination {
  margin-top: 15px;
}
</style>
